<template>
  <view id="patrolDetail">
    <map
      :latitude="31.264437"
      :longitude="120.730687"
      show-location
      id="map1"
      class="h-100vh w-750rpx"
    ></map>
    <view
      id="buttonBox"
      class="bg-white rounded-16rpx h-300rpx p-16 bottom-96 left-16 w-686rpx box-border fixed"
    >

    </view>
  </view>
</template>

<script setup>
import { onReady } from "@dcloudio/uni-app";
onReady(() => {
  const mapContext = uni.createMapContext("map1", getCurrentInstance());
  // 获取页面的大小
  const query = uni.createSelectorQuery().in(getCurrentInstance());
  query.select("#patrolDetail").boundingClientRect();
  query
    .select("#buttonBox")
    .boundingClientRect()
    .exec((arr) => {
      // 理论上应该存在的px
      let mayY = arr[1].top / 2;
      // 实际的px
      let realY = arr[0].height / 2;
      // 计算偏移量
      let offsetY = (realY - mayY) / arr[0].height;
      // 设置偏移量
      mapContext.setCenterOffset({ offset: [0.5, 0.5 - offsetY.toFixed(2)] });
    });
});
</script>

<style lang="scss"></style>

<script>
export default { name: "detail" };
</script>
